<template>
  <view class="index">
    <view class="btn">
      <nut-button type="primary" @click="handleClick('text', msg2, true)"
        >点我</nut-button
      >
    </view>
    <view class="btn">
      <nut-button
        type="primary"
        @click="handleGo('/pages/project/projectList/index')"
        >项目列表</nut-button
      >
    </view>
    <view class="btn">
      <nut-button
        type="primary"
        @click="handleGo('/pages/project/project-list/index')"
        >项目报备</nut-button
      >
    </view>
    <nut-icon
      font-class-name="iconfont"
      class-prefix="iconfont"
      name=".icon-tianjia_hongdi"
      size="12"
      color="#155BD4"
    />
    <nut-toast :msg="msg" v-model:visible="show" :type="type" :cover="cover" />
  </view>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import Taro from "@tarojs/taro";
export default {
  name: "Index",
  components: {},
  setup() {
    const state = reactive({
      msg: "欢迎使用 NutUI3.0 开发小程序",
      msg2: "你成功了～",
      type: "text",
      show: false,
      cover: false,
    });

    const handleClick = (type: string, msg: string, cover: boolean = false) => {
      state.show = true;
      state.msg2 = msg;
      state.type = type;
      state.cover = cover;
    };
    const handleGo = (url: string) => {
      console.log(state);
      Taro.navigateTo({
        url: url,
      });
    };
    return {
      ...toRefs(state),
      handleClick,
      handleGo,
    };
  },
};
</script>

<style lang="scss">
.yh-add-company-content {
  .search-box {
    padding: 0 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    &-input {
      width: 279px;
      height: 32px;
      opacity: 1;
      background: #f7f7f7;
      border-radius: 4px;
      border: none;
    }
    &-text {
      width: 56px;
      height: 32px;
      background: #dc2734;
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .company-list {
    padding: 0 0 0 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .cell-box {
      .cell {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: flex-start;
        &-name {
          font-size: 13px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #333333;
          line-height: 18px;
        }
        &-address {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
        }
      }
    }

    .detail {
      font-size: 12px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      padding: 0 16px 0 0;
    }
  }
}
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  .my-icon {
    font-size: 14px;
    color: red;
  }
  .btn {
    margin-top: 10px;
  }
}
.my-icon {
  font-size: 14px;
  color: red;
}
</style>
